import styled from 'styled-components';
import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
import { Button, Avatar, Card, Drawer, Breadcrumb } from 'antd';
import { CloudUploadOutlined, EditOutlined, LineChartOutlined, LoadingOutlined } from '@ant-design/icons';


import { qiniuGetUrl, SharedObject } from '../../../services';

import { SharedObjectViewer } from '../../../components';


export interface ResultItemDetailProps {
    style?: CSSProperties;
    item: SharedObject;
}

export const ResultItemDetail: React.FC<ResultItemDetailProps> = (props: any) => {

    const [url, setUrl] = useState<string | null>(null);

    useEffect(() => {
        //
        qiniuGetUrl([props.item.icon]).then((url) => {
            console.log(url);
            if (url && url.length > 0) {
                setUrl(url[0]);
            }
        });
    }, [props.item.icon]);

    return (
        <Container style={props.style}>
            <SharedObjectViewer item={props.item}></SharedObjectViewer>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    overflow: auto;
    padding: 10px;
    gap: 10px;
`;
